<template>
	<view class="search">
		<u-sticky bg-color="rgba(255,255,255,0)" offsetTop="-20">
			<view class="input">
				<u-dropdown class="searchStatus" inactive-color="rgba(255, 87, 51, 1)"
					active-color="rgba(255, 87, 51, 1)">
					<u-dropdown-item v-model="searchStatus" :title="searchTitle" :options="options"
						@change="changeStatus">
					</u-dropdown-item>
				</u-dropdown>
				<u-search class="searchInput" @change="GetValue()" @custom="SetValue()" @search="SetValue()" @clear="clearValue()"
					:action-style="text_style" focus v-model="Value" bg-color="#fff" shape="round"></u-search>
			</view>
		</u-sticky>

		<!-- 判断input获取焦点同时后台给到了数据 -->
		<!-- 		<view class="InputList" v-if="isValue && SearchList.length">
			<view v-for="item in SearchList" :key="item.id" @click="SetValue(item.value)" class="listSon">
				{{item.title}}
			</view>
		</view>
		<view v-if="!isValue">
		</view> -->

		<!-- 返回的搜索结果 -->
		<view v-if="!isempty">
			<view class="input_result" v-if="searchStatus===1" hover-stop-propagation="true">
				<!-- <waterfall :datalist="SearchResult" v-if="!isempty"></waterfall> -->
				<waterfall :datalist="SearchResult"></waterfall>
			</view>
			<view class="input_result" v-if="searchStatus===2">
				<view class="need-card" v-for="(item, index) in SearchResult" :key="index">
					<view @click="getneedicardinfo(item.demandUuid)" hover-stop-propagation="true">
						<needcard :needcardall="item"></needcard>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isempty" class="searchHistory">
			<view class="searchBotton" v-if="history.length>0" >搜索历史
				<span class="cleanHistory"@click="cleanHistory()">
					<u-icon name="trash" size="40rpx"></u-icon>
				</span>
			</view>
			<view v-if="history.length>0" v-for="(item,index) in history" :key="index">
				<view class="historyItem" @click="getAndSearch(item)" ref="delHistory">
					{{item}}
				</view>
			</view>
		</view>
		<u-divider v-if="!isempty" color="#878787" bg-color="#f5f5f5" margin-top="60" margin-bottom="60">{{bottomTitle}}
		</u-divider>
		<u-back-top :scroll-top="scrollTop" mode="square" tips="顶部"></u-back-top>
	</view>
</template>

<script>
	import waterfall from '../../components/waterfall/waterfall.vue'
	import needcard from '../../components/needcard/needcard.vue'
	export default {
		data() {
			return {
				// focus: true, //自动获得焦点
				searchStatus: 1,
				searchTitle: '商品',
				options: [{
					label: '商品',
					value: 1,
				}, {
					label: '需求',
					value: 2,
				}],
				isempty: true, //数据为空
				requestTask: '',
				isSending: false, // 用于解决模糊搜索时候的重复请求问题
				Value: '', //搜索内容
				placeholder: '请输入搜索内容', //提示
				SearchList: [],
				SearchResult: [],
				//回到顶部
				scrollTop: 0,
				bottomTitle: '到底了',
				text_style: {
					'color': 'rgba(255, 87, 51, 1)',
				},
				history: [],
				pageNum: 0, //页数
			}
		},
		components: {
			waterfall,
			needcard
		},
		onReachBottom() { //到达底部
			this.SetValue(this.Value);
		},
		methods: {
			getAndSearch(item) {
				this.SearchResult = [];
				this.Value = item;
				this.SetValue();

			},
			changeStatus(event) {
				if (event === 1) {
					this.searchTitle = '商品'
				}
				if (event === 2) {
					this.searchTitle = '需求'
				}
				this.SearchList = [];
				this.isempty = true;
				this.pageNum = 0;
				this.history = this.getHistory();
				// this.wkey = !this.wkey;
			},
			clearValue() {
				this.Value = ''
			},
			getneedicardinfo(uuid) {
				// console.log(uuid);
				let url = '/pages/subpages/Details/demand_details?uuid=' + uuid;
				this.goto(url)
			},
			//页面跳转
			goto(url) {
				uni.navigateTo({
					url: url,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
			ShowValue() { //得到焦点
				// this.isValue = true
			},
			noShowValue() { //失去焦点
				// this.isValue = false
			},
			getList(value) { //这一步是获取数据 
				// if (this.isSending) {
				// 	// this.requestTask.abort();
				// 	uni.addInterceptor('myRequest', {
				// 	  complete(res) {
				// 	    this.isSending=false;
				// 	  }
				// 	})
				// }
				// if (!value) {
				// 	this.isSending = true;
				// 	this.$myRequest({
				// 		method: 'POST',
				// 		showLoad: true,
				// 		url: '/fuzzy_query',
				// 		data: {
				// 			input_value: this.Value
				// 		}
				// 	}).then((res) => {
				// 		this.SearchList = res.data;
				// 		this.isSending=false;
				// 	})
				// 	// console.log(this.SearchList);

				// } else {
				// 	this.getList()
				// }
			},
			GetValue(input) { //input框的change事件 //模糊查询
				// console.log('当前输入' + input);
				this.isempty = true;
				this.SearchResult = []
				this.pageNum = 0;
				// // 有值就获取 没有就让他为空 
				// input ? this.Value = input : this.Value = '';
				// input ? this.getList(this.Value) : this.getList(this.Value)
			},
			SetValue() { //点击事件 搜索点击这一条
				if (this.Value === '') return 0;
				this.addHistory(this.Value);
				let url = this.searchStatus === 1 ? '/search/searchGoods' : '/search/searchDemand';
				this.$myRequest({
					method: 'POST',
					url: url,
					data: {
						name: this.Value,
						pageNum: this.pageNum,
						pageSize: 20
					}
				}).then((res) => {
					this.getHistory();
					if (res.data.code === 200) {
						// this.wkey = !this.wkey;
						this.bottomTitle = '到底了'
						if (res.data.data.length === 0) {
							uni.showToast({
								title: '暂时没有查询到相关数据',
								icon: 'error',
								duration: 2000
							})
							// this.isempty = true
							return 0;
						}
						this.isempty = false
						this.pageNum++;
						for (let item of res.data.data) {
							this.SearchResult.push(item);
						}
					}
				})
			},
			cleanHistory() {
				uni.setStorageSync('searchHistory', [])
				this.history = this.getHistory();
			},
			getHistory() {
				return uni.getStorageSync('searchHistory').reverse()
			},
			addHistory(data) {
				let list = this.history;
				if (list.length >= 15) {
					list.splice(14, 1);
				}
				for (let i = 0; i < list.length; i++) {
					if (list[i] == data) {
						list.splice(i, 1);
					}
				}
				list[list.length] = data
				uni.setStorageSync('searchHistory', list);
				this.history = this.getHistory();
			}

		},
		onLoad() {
			this.history = this.getHistory();
		},
		onPageScroll(e) { //生命周期函数
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss">
	// $max :100%;

	.search {
		width: 100vw;
		height: 80rpx;
		padding-top: 20rpx;
	}

	.input {
		display: flex;
		align-items: center;
		width: 94%;
		margin-left: 3%;
		padding: 0 3%;
		background-color: #FFFFFF;
		border-radius: 49rpx;
	}

	.searchStatus {
		flex: 1;
	}

	.searchInput {
		flex: 5;
	}

	.InputList {
		position: absolute;
		background: #fff;
		left: 7%;
		top: 10rpx;
		width: 86%;
		height: auto;
		min-height: 100rpx;
		top: 74rpx;
		border-radius: 5rpx;
		padding: 10rpx;
	}

	.listSon {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		text-indent: 1em;
	}

	.listSon:nth-of-type(even) {
		background: #f7f7f7;
	}
	.input_result {
		width: 94%;
		// height: 90vh;
		margin-left: 3%;
		margin-top: 32rpx;
		margin-bottom: 100rpx;
		// overflow: auto;
	}

	.results {
		width: 100%;
		height: 100rpx;
		margin-bottom: 10rpx;
		background: #dedede;
	}

	.need-card {
		background: #ffffff;
		width: 100%;
		/* height: 200rpx; */
		margin-bottom: 16rpx;
		border-radius: 16px;
		position: relative;
	}

	.searchHistory {
		// width: 100%;
		padding: 0 3%;
	}

	.searchBotton {
		padding: 20rpx;
		font-weight: bold;
	}

	.cleanHistory {
		float: right;
		font-weight: normal;
	}

	.historyItem {
		float: left;
		margin: 20rpx;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, .1);
	}
</style>
